import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input,  Select, Button, Icon, Row, Col } from 'antd'
import { connect } from 'dva'
import styles  from '../../themes/detail.less'

const FormItem = Form.Item
const Option = Select.Option
const { TextArea } = Input
const ButtonGroup = Button.Group

const formItemLayout = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
}

const EmployerAddressData = ({
  employerAddressData,
  dispatch,
  loading,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
}) => {
  const item = employerAddressData.data || {}
  const { contractTypeData, countryCodeData, parentId, AddressType } = employerAddressData
  const ButtonProps = {
    size: 'large',
    style: {
      marginBottom: 0,
    },
  }
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        id: item.id || 1,
      }
      console.log('data',data)
      dispatch({
        type: 'employerAddressData/update',
        payload: data,
      })
    })
  }
  const handleDelete = () => {
    dispatch({
      type: 'employerAddressData/delete',
      payload: {
        personId: parentId,
        type: AddressType,
        id: item.id,
      }
    })
  }
  const contractTypeOption = contractTypeData.map(d => <Option key={d.code}>{d.name}</Option>)
  const countryOption = countryCodeData.map(d => <Option key={d.code}>{d.name}</Option>)
  return (
    <Form layout="horizontal">
      <div className={styles.div_buttonGroup}>
        <ButtonGroup {...ButtonProps}>
          <Button onClick={handleOk} loading={loading.effects['employerAddressData/update']}>
            Save<Icon type="save" />
          </Button>
          <Button onClick={handleDelete}>
            Delete<Icon type="delete" loading={loading.effects['employerAddressData/delete']} />
          </Button>
        </ButtonGroup>
      </div>
      <div className={styles.div_form}>
        <Row>
          <Col span={12}>
            <FormItem label="ContactType" hasFeedback {...formItemLayout}>
              {getFieldDecorator('addressType', {
                initialValue: item.addressType||'I',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }} showSearch>{contractTypeOption}</Select>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Address" hasFeedback {...formItemLayout}>
              {getFieldDecorator('address', {
                initialValue: item.address,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<TextArea rows={1} />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Country" hasFeedback {...formItemLayout}>
              {getFieldDecorator('countryCode', {
                initialValue: item.countryCode||'NZ',
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Select style={{ width: '100%' }} showSearch>{countryOption}</Select>)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="City" hasFeedback {...formItemLayout}>
              {getFieldDecorator('city', {
                initialValue: item.city,
                rules: [
                  {
                    required: true,
                  },
                ],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="State" hasFeedback {...formItemLayout}>
              {getFieldDecorator('state', {
                initialValue: item.state,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Town" hasFeedback {...formItemLayout}>
              {getFieldDecorator('town', {
                initialValue: item.town,
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <FormItem label="Zip" hasFeedback {...formItemLayout}>
              {getFieldDecorator('zip', {
                initialValue: item.zip,
              })(<Input />)}
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem label="Comments" hasFeedback {...formItemLayout}>
              {getFieldDecorator('comments', {
                initialValue: item.comments,
              })(<TextArea rows={3} />)}
            </FormItem>
          </Col>
        </Row>
      </div>
    </Form>
  )
}

EmployerAddressData.propTypes = {
  form: PropTypes.object.isRequired,
  employerAddressData: PropTypes.object,
  loading: PropTypes.object,
  dispatch: PropTypes.func,
}

export default connect(({ employerAddressData, loading }) => ({ employerAddressData, loading }))(Form.create()(EmployerAddressData))

